<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>

		<view class="form-group">
			<view class="input-item">
				<text class="label">用户名</text>
				<input type="text" v-model="loginForm.username" placeholder="请输入用户名" class="input" />
			</view>
			 
			<view class="input-item">
				<text class="label">密码</text>
				<input type="password" v-model="loginForm.password" placeholder="请输入密码" class="input" />
			</view>

			<view class="input-item code-item">

				<input type="text" v-model="loginForm.code" placeholder="请输入验证码" class="input code-input" />
				<view class="code-img" v-html="codeImageUrl" @click="refreshCode" />
			</view>

			<button class="login-btn" @click="login">登录</button>
		</view>
	</view>
</template>

<script setup>
import { HmacSHA256 } from 'crypto-js';
	import {
		ref,
		reactive
	} from 'vue'
	import request from '/utils/http.js'
	const title = ref('AI Chat 登录')
	function encrypt(str) {

		return HmacSHA256(str, 'carole123456').toString();
	}
	// 初始化验证码图片URL
	const codeImageUrl = ref('')
	const loginForm = reactive({
		username: '',
		password: '',
		code: '',
		uuid: ''
	})
	// 调用后端接口获取验证码图片
	const getCaptchaImage = () => {
		// 使用uni.request调用GET接口获取验证码
		uni.request({
			url: 'http://192.168.6.98:3000/v1/captchaImage',
			method: 'GET',
			success: (res) => {
				// 假设接口返回的数据中包含验证码图片的URL
				// 这里根据实际接口返回格式进行调整
				if (res.data) {
					codeImageUrl.value = res.data.img
					loginForm.uuid = res.data.uuid
				} else {
					// 如果接口返回格式不符合预期，使用默认logo
					codeImageUrl.value = `/static/logo.png?timestamp=${Date.now()}`
				}
			},
			fail: () => {
				// 请求失败时使用默认logo
				uni.showToast({
					title: '获取验证码失败，请重试',
					icon: 'none'
				})
				codeImageUrl.value = `/static/logo.png?timestamp=${Date.now()}`
			}
		})
	}

	// 刷新验证码
	const refreshCode = () => {
		getCaptchaImage()
	}

	// 页面加载时获取验证码
	getCaptchaImage()

	// 登录方法
	const login = async() => {
		if (!loginForm.username) {
			uni.showToast({
				title: '请输入用户名',
				icon: 'none'
			})
			return
		}

		if (!loginForm.password) {
			uni.showToast({
				title: '请输入密码',
				icon: 'none'
			})
			return
		}

		if (!loginForm.code) {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none'
			})
			return
		}		 
		uni.showLoading({
			title: '登录中...'
		})
		const res = await request('/login', 'POST', {...loginForm,password:encrypt(loginForm.password)})
		console.log(res,'login-object')
		if (res.code === 200) {
			uni.showToast({
				title: '登录成功',
				icon: 'success'
			})
			uni.setStorageSync('token', res.token)
			uni.navigateTo({
				url: '/pages/chatroom/index'
			})
			uni.hideLoading()
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
			uni.hideLoading()
			refreshCode()
		}
	 
		// 模拟登录请求

	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 40rpx;
		color: #333;
		margin-bottom: 60rpx;
	}

	.form-group {
		width: 80%;
		margin-top: 40rpx;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.label {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.input {
		height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.code-item {
		flex-direction: row;
		align-items: center;
	}

	.code-input {
		flex: 1;
		margin-right: 20rpx;
	}

	.code-img {
		height: 80rpx;
		width: 200rpx;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
	}

	.login-btn {
		height: 90rpx;
		background-color: #007aff;
		color: #fff;
		font-size: 32rpx;
		margin-top: 40rpx;
	}

	.login-btn:active {
		background-color: #0062cc;
	}
</style>